<script setup lang="ts">
import { useCategoryStore } from "@/stores/categoryStore";
import { useRoute } from "vue-router";
import XtxBread from "@/components/XtxBread.vue";
import XtxBreadItem from "@/components/XtxBreadItem.vue";

// 获取存储分类状态的 store 对象
const store = useCategoryStore();
// 获取路由信息对象
const route = useRoute();
</script>
<template>
  <XtxBread>
    <XtxBreadItem path="/">首页</XtxBreadItem>
    <Transition name="fade-right" mode="out-in">
      <XtxBreadItem :key="(route.params.id as string)">{{
        store.currentTop(route.params.id as string)?.name
      }}</XtxBreadItem>
    </Transition>
  </XtxBread>
</template>
